<template>
  <template v-for="(tag, index) in state.tags" :key="tag">
    <Tooltip v-if="tag.length > 20" :title="tag">
      <Tag :closable="index !== 0" @close="handleClose(tag)">
        {{ `${tag.slice(0, 20)}...` }}
      </Tag>
    </Tooltip>
    <Tag v-else :closable="index !== 0" @close="handleClose(tag)">
      {{ tag }}
    </Tag>
  </template>
  <Input
    v-if="inputVisible"
    ref="inputRef"
    type="text"
    size="small"
    :style="{ width: '78px' }"
    v-model:value="inputValue"
    @blur="handleInputConfirm"
    @keyup.enter="handleInputConfirm"
  />
  <Tag v-else @click="showInput" style="background: #fff; border-style: dashed">
    <plus-outlined />
    New Tag
  </Tag>
</template>

<script lang="ts" setup>
import {reactive, ref, nextTick, PropType} from 'vue';
import { Tooltip,Tag,Input } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { useAttrs } from '@vben/hooks';

const attrs = useAttrs();
const props = defineProps({
  isAdd: { type: Boolean, default: false },
  dataValue: { type: Array, default: [] },
});

const emit = defineEmits(['change', 'update:value', 'success']);

const inputRef = ref();
const inputVisible=ref(false);
const inputValue=ref("")

const state = reactive({
  tags: ['Unremovable', 'Tag 2', 'Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3'],
  inputVisible: false,
  inputValue: '',
});

const handleClose = (removedTag: string) => {
  const tags = state.tags.filter(tag => tag !== removedTag);
  console.log(tags);
  state.tags = tags;
};

const showInput = () => {
  state.inputVisible = true;
  nextTick(() => {
    inputRef.value.focus();
  });
};

const handleInputConfirm = () => {
  const inputValue = state.inputValue;
  let tags = state.tags;
  if (inputValue && tags.indexOf(inputValue) === -1) {
    tags = [...tags, inputValue];
  }
  console.log(tags);
  Object.assign(state, {
    tags,
    inputVisible: false,
    inputValue: '',
  });
  emit('success',tags);
};

</script>

<style scoped>

</style>
